<!DOCTYPE html>
<html lang="en" class="no-js">
  <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="generator" content="Hugo 0.55.6" />

  <meta name="ROBOTS" content="INDEX, FOLLOW" />

  <link rel="alternate" type="application/rss&#43;xml" href="/index.xml" />

  <link rel="shortcut icon" href="/assets/favicons/favicon.ico" />
  <link rel="apple-touch-icon" href="/assets/favicons/apple-touch-icon.png" sizes="180x180" />
  <link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16" />
  <link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-144x144.png" sizes="36x36" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-144x144.png" sizes="48x48" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-144x144.png" sizes="72x72" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-144x144.png" sizes="96x96" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-144x144.png" sizes="144x144" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-192x192.png" sizes="192x192" />

  <title>Contributing to Meshery Docs | Meshery</title>
  <meta property="og:title" content="Contributing to Meshery Docs" />
  <meta property="og:description"
    content="How to contribute to Meshery Docs." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="http://localhost:4000" />
  <meta property="og:site_name" content="http://localhost:4000" />
  <meta property="og:image"
    content="https://raw.githubusercontent.com/meshery/meshery/master/docs/assets/img/meshery-cncf-twitter.png" />

  <meta itemprop="name" content="Contributing to Meshery Docs" />
  <meta itemprop="description"
    content="How to contribute to Meshery Docs." />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Contributing to Meshery Docs" />
  <meta name="twitter:description"
    content="How to contribute to Meshery Docs." />
  <meta name="twitter:image"
    content="https://raw.githubusercontent.com/meshery/meshery/master/docs/assets/img/meshery-cncf-twitter.png" />
  
    <!-- <link rel="stylesheet" href="/assets/css/palette.css" /> -->
  <!-- <link rel="stylesheet" href="/assets/css/anchorjs.css" /> -->
  <link rel="stylesheet" href="/assets/css/sass.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />

  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-PCGTC98C');</script>

  <!-- End Google Tag Manager -->
  
  
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"
    integrity="sha512-qzgd5cYSZcosqpzpn7zF2ZId8f/8CHmFKZ8j7mU4OUXTNRd5g+ZHBPsgKEwoqxCtdQvExE5LprwwPAgoicguNg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>



  <!-- Anchorjs included for adding hover anchor links to headings -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.2/anchor.min.js"></script>
  <script>
    $(function () {
      /** AnchorJS options and selector */
      anchors.options = {
        visible: "hover",
        placement: "right",
      };
      anchors.add("h1, h2, h3, h4, h5");
    });
    // Function to handle anchor links
    document.addEventListener('click', function (event) {
      if (event.target.tagName === 'A' && event.target.getAttribute('href').startsWith('#')) {
        window.location.hash = event.target.getAttribute('href');
      }
    });
  </script>
</head>
 <header>
  <nav class="js-navbar-scroll navbar">
    <a class="navbar-brand" href="/">
      <div class="navbar-logo">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1703.46 182.75"><defs><style>.cls-1{fill:#00d3a9;}.cls-2{fill:#00b39f;}.cls-3{fill:#3c494f;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M96,43.12V86.7l38.52-21.91Z"/><path class="cls-1" d="M96,95.82v43.92l38.87-21.9Z"/><path class="cls-2" d="M90.43,86.47v-43L52.38,64.91Z"/><path class="cls-2" d="M14,139.51a93,93,0,0,0,29.56,29.21v-46Z"/><path class="cls-2" d="M90.42,139.51V96.17L52.25,117.84Z"/><path class="cls-1" d="M49.08,166,87.72,144.3,49.08,122.4Z"/><path class="cls-2" d="M137.57,166.21V122.63L98.94,144.31Z"/><path class="cls-2" d="M175.4,134.5a89.15,89.15,0,0,0,10.94-39.13L146.07,118Z"/><path class="cls-1" d="M143.13,113.28,182,91.49,143.13,69.7Z"/><path class="cls-2" d="M137.56,60.23V17L99.15,38.56Z"/><path class="cls-2" d="M137.55,113.05V69.47L99,91.26Z"/><path class="cls-1" d="M49.08,69.36v44L88,91.26Z"/><path class="cls-2" d="M90.43,0a93.2,93.2,0,0,0-41,10.61l41,23Z"/><path class="cls-1" d="M49.08,16.65V60.46L88,38.56Z"/><path class="cls-2" d="M43.55,14A91.83,91.83,0,0,0,14,43.23L43.55,60V14Z"/><path class="cls-1" d="M137.32,10.84A94.71,94.71,0,0,0,96,0V34Z"/><path class="cls-1" d="M0,94.57a89.28,89.28,0,0,0,11.17,40.27l29.91-17Z"/><path class="cls-1" d="M11.17,47.91A90.17,90.17,0,0,0,0,88.06L41.08,64.91l-30-17Z"/><path class="cls-2" d="M49.47,172a93.47,93.47,0,0,0,41,10.61V149l-41,22.93Z"/><path class="cls-1" d="M172.46,43.35a93,93,0,0,0-29.33-29.09V60Z"/><path class="cls-1" d="M143.13,168.6a91.72,91.72,0,0,0,29.45-29.31l-29.45-16.66v46Z"/><path class="cls-2" d="M186.42,87.72A89.58,89.58,0,0,0,175.36,48L145.68,64.79Z"/><path class="cls-1" d="M96,182.75a93.24,93.24,0,0,0,41-10.61L96,148.87Z"/><path class="cls-2" d="M43.55,112.94V69.81L5.38,91.26Z"/><path class="cls-3" d="M784.8,56.17v92H889.85v-22h-83V104.6h63.94v-22H806.81V61.05h83v-22H784.8Z"/><path class="cls-3" d="M379.53,56.17v92H485v-22H402V104.6H465.9v-22H402V61.05H485v-22H379.53Z"/><path class="cls-3" d="M630.74,119.66a23.83,23.83,0,0,1-2.49,11,28.89,28.89,0,0,1-6.22,9,35.86,35.86,0,0,1-9.14,6.1,27.83,27.83,0,0,1-11.21,2.44H497.87V125.36H601.68a5.38,5.38,0,0,0,4.15-1.63,5.15,5.15,0,0,0,1.66-4.07v-9a5.15,5.15,0,0,0-1.66-4.07,5.38,5.38,0,0,0-4.15-1.63H526.94a25.15,25.15,0,0,1-11.22-2.44,29.55,29.55,0,0,1-9.13-6.11,34.86,34.86,0,0,1-6.23-8.95,23.86,23.86,0,0,1-2.49-11v-9a23.79,23.79,0,0,1,2.49-11,34.74,34.74,0,0,1,6.23-9,35.37,35.37,0,0,1,9.13-6.1,25.15,25.15,0,0,1,11.22-2.45h103.8v23.2H526.94a5.42,5.42,0,0,0-4.16,1.63A5.19,5.19,0,0,0,521.12,68v9A5.2,5.2,0,0,0,522.78,81a5.41,5.41,0,0,0,4.16,1.62h74.74a25.11,25.11,0,0,1,11.21,2.45,35.6,35.6,0,0,1,9.14,6.1,34.71,34.71,0,0,1,6.22,9,26.4,26.4,0,0,1,2.49,11Z"/><path class="cls-3" d="M770.68,148.15H749.51V105.42H666.87v42.73H645.7V82.22H749.51V39.07h21.17ZM666.87,72H645.7V39.48h21.17Z"/><path class="cls-3" d="M1073,77.33l-27.83-38.26h-27.82l44.43,65.53v43.55h22.43V104.6l44.43-65.53h-27.41Z"/><path class="cls-3" d="M927.64,59.83h56.89V83H938.85v20.76h10.38l40.28,44.77h27.41l-40.28-44.77h15.78a17.37,17.37,0,0,0,17.44-17.1V56.17a17.38,17.38,0,0,0-17.44-17.1H906.05V147.75h22Z"/><path class="cls-3" d="M360.43,57.39c-4.57-10.58-15.78-18.32-27.82-17.91H223.81V148.56h23.67V62.27c32.39,0,86.37-.4,87.62.41,8.3-2.44,2.49,82.22,4.15,85.07h23.67C361.67,140.42,365,62.27,360.43,57.39Z"/><path class="cls-3" d="M305.2,74.48H281.53v73.67H305.2Z"/><rect class="cls-3" x="1235.62" y="1.38" width="5" height="180"/><path class="cls-3" d="M1408,39.61c28.88,0,49.39,23.49,49.39,52.38s-20.51,52.38-49.39,52.38h-40.42a2.68,2.68,0,0,1-3-3V42.6a2.68,2.68,0,0,1,3-3H1408Zm0,94.89c23.34,0,39.21-19,39.21-42.51S1431.34,49.48,1408,49.48h-32.93v85Zm101.7,11.67A39.22,39.22,0,1,1,1549.07,107,38.9,38.9,0,0,1,1509.7,146.17Zm0-9.58A29.64,29.64,0,1,0,1480.22,107,29.2,29.2,0,0,0,1509.7,136.59ZM1633,120.43c2.09,0,3.29,1.34,2.39,3.44-5.24,13.32-18.86,22.3-34.72,22.3-22.6,0-39.37-17.06-39.37-39.21s16.77-39.22,39.37-39.22c15.86,0,29.33,9,34.72,22.3.9,2.1-.3,3.45-2.39,3.45h-4.35a3.76,3.76,0,0,1-3.59-2.25c-4.49-8.53-13.62-13.92-24.39-13.92a29.64,29.64,0,0,0,0,59.27c10.92,0,20-5.54,24.39-13.92a3.76,3.76,0,0,1,3.59-2.24Zm26.44-31.28c0,19,44,7.63,44,35.62,0,12.27-11.07,21.4-27.69,21.4-15.41,0-26-7.78-27.54-20.35-.15-2.1,1-3.15,3-3.15h3.89c1.79,0,2.69,1,3.14,2.85,1.35,8.23,9,11.07,17.51,11.07,9.43,0,17.81-3.44,17.81-11.82,0-19-44-7.64-44-35.62,0-12.28,11.08-21.41,26.19-21.41,14.07,0,24.55,7.79,26,20.36.15,2.09-1,3.14-3,3.14h-3.89c-1.8,0-2.69-1-3.14-2.84-1.35-8.23-8.83-11.08-16-11.08C1667.84,77.32,1659.46,80.77,1659.46,89.15Z"/></g></g></svg>
      </div>
      <div class="mobile">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.08 80.17"><defs><style>.cls-1{fill:#00d3a9;}.cls-2{fill:#00b39f;}.cls-3 {fill:var(--meshery-logo-text-fill);}</style></defs><polygon class="cls-1" points="41.26 18.9 41.26 38.04 57.86 28.43 41.26 18.9"/><polygon class="cls-1" points="41.26 42.05 41.26 61.29 58.01 51.71 41.26 42.05"/><polygon class="cls-2" points="38.87 37.91 38.87 19.06 22.48 28.45 38.87 37.91"/><path class="cls-2" d="M6,61.22A40.35,40.35,0,0,0,18.71,74V53.86Z"/><polygon class="cls-2" points="38.87 61.2 38.87 42.19 22.44 51.7 38.87 61.2"/><polygon class="cls-1" points="21.1 72.81 37.74 63.3 21.1 53.68 21.1 72.81"/><polygon class="cls-2" points="59.15 72.92 59.15 53.81 42.53 63.31 59.15 72.92"/><path class="cls-2" d="M75.42,59a39.88,39.88,0,0,0,4.71-17.18l-17.32,9.9Z"/><polygon class="cls-1" points="61.54 49.7 78.23 40.15 61.54 30.55 61.54 49.7"/><polygon class="cls-2" points="59.15 26.42 59.15 7.43 42.61 16.91 59.15 26.42"/><polygon class="cls-2" points="59.15 49.61 59.15 30.45 42.57 40.05 59.15 49.61"/><polygon class="cls-2" points="40.07 80.17 40.07 80.17 40.07 80.17 40.07 80.17"/><polygon class="cls-1" points="21.1 30.41 21.1 49.72 37.8 40.05 21.1 30.41"/><path class="cls-2" d="M38.87,0A40,40,0,0,0,21.28,4.65L38.87,14.77Z"/><polygon class="cls-1" points="21.1 7.31 21.1 26.49 37.81 16.91 21.1 7.31"/><path class="cls-2" d="M18.71,6.14A40.28,40.28,0,0,0,6,18.94l12.72,7.34Z"/><path class="cls-1" d="M59,4.74A40,40,0,0,0,41.26,0V14.93Z"/><path class="cls-1" d="M0,41.48A40,40,0,0,0,4.79,59.16L17.67,51.7Z"/><path class="cls-1" d="M4.79,21A40,40,0,0,0,0,38.58L17.69,28.45Z"/><path class="cls-2" d="M21.24,75.49a39.88,39.88,0,0,0,17.63,4.66V65.41Z"/><path class="cls-1" d="M74.17,19A40.24,40.24,0,0,0,61.54,6.21v20.1Z"/><path class="cls-1" d="M61.54,74A40.34,40.34,0,0,0,74.23,61.07L61.54,53.75Z"/><path class="cls-2" d="M80.13,38.48a39.88,39.88,0,0,0-4.76-17.42L62.64,28.43Z"/><path class="cls-1" d="M41.26,80.15a39.79,39.79,0,0,0,17.59-4.64L41.26,65.34Z"/><polygon class="cls-2" points="18.71 49.54 18.71 30.61 2.27 40.04 18.71 49.54"/><polygon class="cls-3" points="269.94 29.39 269.94 30.89 269.94 37.93 269.94 46.53 269.94 59.08 303.36 59.08 303.36 52.03 276.99 52.03 276.99 46.53 276.99 44.98 297.25 44.98 297.25 37.93 276.99 37.93 276.99 30.89 303.36 30.89 303.36 23.84 269.94 23.84 269.94 29.39"/><polygon class="cls-3" points="141.41 29.39 141.41 30.89 141.41 37.93 141.41 46.53 141.41 59.08 174.83 59.08 174.83 52.03 148.46 52.03 148.46 46.53 148.46 44.98 168.72 44.98 168.72 37.93 148.46 37.93 148.46 30.89 174.83 30.89 174.83 23.84 141.41 23.84 141.41 29.39"/><path class="cls-3" d="M221.08,49.87a8.74,8.74,0,0,1-.73,3.57,9,9,0,0,1-2,2.94,9.5,9.5,0,0,1-2.93,2,9,9,0,0,1-3.6.73h-33V51.66h33a1.78,1.78,0,0,0,1.79-1.79V47a1.76,1.76,0,0,0-.52-1.27,1.73,1.73,0,0,0-1.27-.51H188.09a8.74,8.74,0,0,1-3.57-.73,9.4,9.4,0,0,1-5-5,8.9,8.9,0,0,1-.73-3.57V33.09a9.11,9.11,0,0,1,.73-3.59,9.58,9.58,0,0,1,2-2.94,9.32,9.32,0,0,1,3-2,8.9,8.9,0,0,1,3.57-.72h33v7.47h-33a1.78,1.78,0,0,0-1.79,1.78V36a1.78,1.78,0,0,0,1.79,1.79h23.73a9.11,9.11,0,0,1,3.6.72,9.59,9.59,0,0,1,2.93,2,9.41,9.41,0,0,1,2,2.94,8.9,8.9,0,0,1,.73,3.59Z"/><path class="cls-3" d="M265.54,59.08h-6.73V45.22H232.6V59.08h-6.72V37.75h32.93V23.84h6.73ZM232.6,34.44h-6.72V23.84h6.72Z"/><polygon class="cls-3" points="361.45 36.17 352.64 23.84 343.83 23.84 357.93 44.98 357.93 59.08 364.98 59.08 364.98 44.98 379.08 23.84 370.38 23.84 361.45 36.17"/><path class="cls-3" d="M315.35,30.56h18.07v7.33H318.86v6.72h3.34L335,59.08h8.7L330.9,44.61h5a5.48,5.48,0,0,0,5.48-5.48V29.31a5.47,5.47,0,0,0-5.48-5.47H308.44V59.08h7.05Z"/><path class="cls-3" d="M136,59.08h-7.47V33.38a1.94,1.94,0,0,0-.16-.8,2.15,2.15,0,0,0-1.11-1.11,1.94,1.94,0,0,0-.8-.16H91.91V23.84h34.54a9.22,9.22,0,0,1,3.69.75,9.38,9.38,0,0,1,5.1,5.1,9.22,9.22,0,0,1,.75,3.69Zm-36.6,0H91.91V31.31l7.48-2Zm18.28,0h-7.48V35.22h7.48Z"/></svg>
      </div>
    </a>

    <div id="main_navbar">
      <ul class="navbar-nav">
        <!-- 
			<li class="nav-item">
        <a class="nav-link" href="https://github.com/meshery/meshery" target="_blank"><span>GitHub</span></a>
      </li>  -->

        <!-- Internal links -->
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="/installation/quick-start"
            ><span>Quick Start</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://meshery.io"
            ><span>Website</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="http://discuss.meshery.io/"
            ><span>Discuss</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://meshery.io/catalog"
            ><span>Catalog</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://meshery.io/blog"
            ><span>Blog</span></a
          >
        </li>
        
        
        <a href="https://play.meshery.io">
          <div class="nav-btn">Playground</div>
        </a>
        <!--Version Selector -->
        <select
          onchange="window.location=this.value"
          class="appearance-none flex-1 w-full px-0 py-1 placeholder-gray-900 tracking-wide focus:outline-none version-selector"
          name="versioningSelection"
          id="versioningSelection"
        >
          <!-- <option value="">Versions</option> -->
           <!-- we get the version selected, and put it to the right option  --><option
            
            value="/"
            class="nav-item mr-4 mb-2 mb-lg-0 text-black"
          >
            <span>latest</span>
          </option>
          <!-- we get the version selected, and put it to the right option  --><option
            
            value="/v0.6"
            class="nav-item mr-4 mb-2 mb-lg-0 text-black"
          >
            <span>v0.6</span>
          </option>
          <!-- we get the version selected, and put it to the right option  --><option
            
            value="/v0.5"
            class="nav-item mr-4 mb-2 mb-lg-0 text-black"
          >
            <span>v0.5</span>
          </option>
          <!-- we get the version selected, and put it to the right option  --><option
            
            value="/v0.4"
            class="nav-item mr-4 mb-2 mb-lg-0 text-black"
          >
            <span>v0.4</span>
          </option>
          
        </select>
      </ul>
    </div>

    <div class="icon-container">
      <button class="nav-toggle-btn nav-toggle-btn--main">
        <svg
          id="menu-nav-toggle-btn"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-menu"
        >
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
      <button class="nav-mode-icon" id="mode-toggle-btn" style="text-align: center">
        <img class="nav-text" id="logo-dark-light" src="/assets/img/nav-icons/mode-toggle-icon-moon.png" 
        data-logo-for-dark="/assets/img/nav-icons/mode-toggle-icon-moon.png"
        data-logo-for-light="/assets/img/nav-icons/mode-toggle-icon-sun.png"
        />
      </button>
    </div>

    <!--Search Bar
    <div class="navbar-nav d-none d-lg-block"><input type="search" class="form-control td-search-input" placeholder="&#xf002 Search this site…" aria-label="Search this site…" autocomplete="off"></div>-->

    <!-- meshery-custom-begin
	<div class="navbar-nav d-none d-lg-block">
          <a class="gh-source" data-gh-source="github" href="https://github.com/meshery/meshery" title="Go to repository" data-md-state="done">
          <div class="gh-source__repository">
            <i class="fab fa fa-github fa-2x" style='padding-right:20px; float:left; margin-top:5px'></i>
            meshery/meshery
          <ul class="gh-source__facts"><li class="gh-source__fact" id='stars'></li><li id="forks" class="gh-source__fact"></li></ul></div></a>
        </div>
      </div>
meshery-custom-end -->
  </nav>
</header>

<!-- meshery-custom-begin
<script>
$(document).ready(function() {
  var url = "https://api.github.com/search/repositories?q=meshery/meshery";
  fetch(url, { 
      headers: {"Accept":"application/vnd.github.preview"}
  }).then(function(e) {
    return e.json()
  }).then(function(r) {
     console.log(r.items[0])
     stars = r.items[0]['stargazers_count']
     forks = r.items[0]['forks_count']
     $('#stars').text(stars + " Stars")
     $('#forks').text(forks + " Forks")
  });
});
</script>
meshery-custom-end -->


  <body class="td-section dark-mode">
    <script>
      if(localStorage.getItem("mode") == "light-mode")  {
      document.body.classList.remove("dark-mode");
      const allLogos = document.querySelectorAll("#logo-dark-light");
      allLogos.forEach(e => e.src = e.dataset.logoForLight);
  }
    </script>
    <!-- Google Tag Manager -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PCGTC98C"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager -->

    <div class="flex-container">
      <div class="left-container">
        <div class="sidebar-container-wrapper">
          <div class="sidebar-container"><div class="sidebar-menu">
  <form class="sidebar__search-form">
    <input
      type="search"
      class="sidebar__search-input"
      id="sidebar-search-input"
      placeholder="Search this site..."
      aria-label="Search this site..."
      autocomplete="off"
    />
  </form>
  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> -->
  <script type="text/javascript">
    // <!--Ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView-->
    // <!--Ref: https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move-->
    (() => {
      window.addEventListener("load", function () {
        let scrollElem = document.getElementsByClassName("sidebar-nav__section-link active").item(0);
        if (scrollElem) {
         scrollElem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
        }
        let activeSections = document.querySelectorAll(".sidebar-nav__section-link.active");
      activeSections.forEach(function (activeSection) {
        let parentCollapse = activeSection.closest(".collapse");
        if (parentCollapse) {
          parentCollapse.classList.add("show");
        }
      });
    });
  })();
  </script>

  <nav class="sidebar-nav" id="td-section-nav">
    
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section0" aria-expanded="false" aria-controls="section0"> ⇅ </div>
        <a
          href="/project/overview"  class="toggle"  data-toggle="collapse" data-target="#section0" aria-expanded="false" aria-controls="section0"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 🗺 Overview & Installation
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section0">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/faq"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >FAQs</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/installation/quick-start"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >🚀 Quick Start</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/installation"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Installation ↆ</a
              >
            </li>
              <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section1" aria-expanded="false" aria-controls="section1"> ⇅ </div>
        <a
          href="/concepts"  class="toggle"  data-toggle="collapse" data-target="#section1" aria-expanded="false" aria-controls="section1"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 🧠 Concepts
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section1">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/concepts/architecture"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Architectural ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/concepts/logical"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Logical ↆ</a
              >
            </li>
              <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section2" aria-expanded="false" aria-controls="section2"> ⇅ </div>
        <a
          href="/guides"  class="toggle"  data-toggle="collapse" data-target="#section2" aria-expanded="false" aria-controls="section2"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 📚 Guides & Tutorials
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section2">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/infrastructure-management/overview"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >⚙️ Infrastructure Management ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/configuration-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Configuring Kubernetes Infrastructure ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/events-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Managing Events with Notification Center</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/infrastructure-management/gitops-with-meshery"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >GitOps with Meshery</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/performance-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Performance Management ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/mesheryctl"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Using Meshery CLI Guides ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/troubleshooting"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Troubleshooting Guides ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/tutorials"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >🧑‍🔬 Tutorials ↆ</a
              >
            </li>
              <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section3" aria-expanded="false" aria-controls="section3"> ⇅ </div>
        <a
          href="/extensibility"  class="toggle"  data-toggle="collapse" data-target="#section3" aria-expanded="false" aria-controls="section3"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 🛠 Integrations & Extensions
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section3">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/api"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >APIs</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/adapters"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Adapters ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/integrations"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Integrations</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/load-generators"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Load Generators</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/providers"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Providers</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/ui"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >UI Plugins</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensions"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >🦾 Extensions ↆ</a
              >
            </li>
              <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section4" aria-expanded="false" aria-controls="section4"> ⇅ </div>
        <a
          href="/project"  class="toggle"  data-toggle="collapse" data-target="#section4" aria-expanded="false" aria-controls="section4"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 🧑‍💻 Contributing & Community
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section4">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/community"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Community</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/contributing"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Contributing ↆ</a
              >
            </li>
             
             <ul style="margin-bottom: 0;">

                     
                  <li id="build-release-ci-ↆ">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-build-release-ci-ↆ"
                    href="/project/contributing/build-and-release"
                    >Build & Release (CI) ↆ</a>
                  </li>
                  
                  <ul style="margin-bottom: 0;">
                         
                      <li id="end-to-end-testing">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-contributing-community-contributing-ↆ-end-to-end-testing"
                        href="/project/contributing/contributing-ui-tests"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">End-to-End Testing</strong></a
                      >
                      </li>
                       <!-- grandchild -->
                  </ul>
                  
                   <!-- end grandchild -->
                   
                  <li id="adapters">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-adapters"
                    href="/project/contributing/contributing-adapters"
                    >Adapters</a>
                  </li>
                   <!-- end grandchild -->
                   
                  <li id="cli-ↆ">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-cli-ↆ"
                    href="/project/contributing/contributing-cli"
                    >CLI ↆ</a>
                  </li>
                  
                  <ul style="margin-bottom: 0;">
                         
                      <li id="design-principles">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-contributing-community-contributing-ↆ-design-principles"
                        href="/project/contributing/contributing-cli-guide"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Design Principles</strong></a
                      >
                      </li>
                       <!-- grandchild -->
                  </ul>
                  
                   <!-- end grandchild -->
                   
                  <li id="docs">
                  <a
                    class="sidebar-nav__section-link  active "
                    id="m-contributing-community-contributing-ↆ-docs"
                    href="/project/contributing/contributing-docs"
                    >Docs</a>
                  </li>
                   <!-- end grandchild -->
                   
                  <li id="server-ↆ">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-server-ↆ"
                    href="/project/contributing/contributing-server"
                    >Server ↆ</a>
                  </li>
                  
                  <ul style="margin-bottom: 0;">
                         
                      <li id="server-events">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-contributing-community-contributing-ↆ-server-events"
                        href="/project/contributing/contributing-server-events"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Server Events</strong></a
                      >
                      </li>
                         
                      <li id="server-errors">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-contributing-community-contributing-ↆ-server-errors"
                        href="/project/contributing/contributing-error"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Server Errors</strong></a
                      >
                      </li>
                       <!-- grandchild -->
                  </ul>
                  
                   <!-- end grandchild -->
                   
                  <li id="ui">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-ui"
                    href="/project/contributing/contributing-ui"
                    >UI</a>
                  </li>
                  
                  <ul style="margin-bottom: 0;">
                         
                      <li id="notification-center">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-contributing-community-contributing-ↆ-notification-center"
                        href="/project/contributing/contributing-ui-notification-center"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Notification Center</strong></a
                      >
                      </li>
                       <!-- grandchild -->
                  </ul>
                  
                   <!-- end grandchild -->
                   
                  <li id="docker-extension">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-docker-extension"
                    href="/project/contributing/contributing-docker-extension"
                    >Docker Extension</a>
                  </li>
                   <!-- end grandchild -->
                   
                  <li id="policies">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-policies"
                    href="/project/contributing/contributing-policies"
                    >Policies</a>
                  </li>
                   <!-- end grandchild -->
                   
                  <li id="models-ↆ">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-contributing-community-contributing-ↆ-models-ↆ"
                    href="/project/contributing/contributing-models"
                    >Models ↆ</a>
                  </li>
                  
                  <ul style="margin-bottom: 0;">
                         
                      <li id="components">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-contributing-community-contributing-ↆ-components"
                        href="/project/contributing/contributing-components"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Components</strong></a
                      >
                      </li>
                         
                      <li id="relationships">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-contributing-community-contributing-ↆ-relationships"
                        href="/project/contributing/contributing-relationships"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Relationships</strong></a
                      >
                      </li>
                       <!-- grandchild -->
                  </ul>
                  
                   <!-- end grandchild -->
                 <!-- children -->
              </ul> 
                <!-- end children -->
                <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section5" aria-expanded="false" aria-controls="section5"> ⇅ </div>
        <a
          href="/reference"  class="toggle"  data-toggle="collapse" data-target="#section5" aria-expanded="false" aria-controls="section5"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 📖 Reference
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section5">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/reference/error-codes"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Error Code Reference</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/reference/permissions"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Permissions Keys Reference</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/api"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >REST & GraphQL APIs ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/reference/mesheryctl"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >CLI Command Reference</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/reference/meshery-operator-crds"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Meshery Operator CRDs</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/releases"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Releases</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/security-vulnerabilities"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Vulnerabilities</a
              >
            </li>
              <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
</nav>
</div>
</div>
        </div>

        <div class="icon-container">
          <button class="nav-toggle-btn nav-toggle-btn--document">
            <?xml version="1.0" encoding="utf-8"?>
              <svg version="1.1" id="document-nav-toggle-btn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 10.7 18.7" style="enable-background:new 0 0 10.7 18.7;" xml:space="preserve">
              <style type="text/css">
                .st0{stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;}
              </style>
              <path class="st0" d="M8.1,9.4L1,1.9C0.7,1.7,0.7,1.2,1,1c0.3-0.3,0.7-0.3,1,0c0,0,0,0,0,0l7.8,7.9c0.3,0.3,0.3,0.7,0,1l-7.8,7.9
                c-0.3,0.3-0.7,0.3-1,0c0,0,0,0,0,0c-0.3-0.3-0.3-0.7,0-1L8.1,9.4z"/>
              </svg>
          </button>
        </div>
      </div>
      <main class="main-container" role="main">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb spb-1">
            <li class="breadcrumb-item active" aria-current="page"><div id="breadcrumbs">


   <a href="/">home</a>


  
    / <a href="/project">project</a> 
  

  
    / <a href="/project/contributing">contributing</a> 
  

  
    / contributing to meshery docs
  

</div>

<!-- <a href="http://idratherbewriting.com" class="noCrossRef productSubtitle"> Home </a> > <a class="noCrossRef productSubtitle" href="http://localhost:4000">Learn API Doc</a> > contributing-docs -->
</li>
          </ol>
        </nav>
        <div class="td-content">
          
          <h1>Contributing to Meshery Docs</h1>
           <div class="alert alert-info">
<h4 class="alert-heading">Important</h4>
Before contributing, please review the <a href="https://github.com/meshery/meshery/blob/master/CONTRIBUTING.md#documentation-contribution-flow">Documentation Contribution Flow</a>.
</div>

<p>Use the following steps to set up your development environment depending on your Operating System of choice, fork the repository, install dependencies and run the site locally.  You can then make changes, test locally, sign-off and commit, and push the changes made for review.</p>

<div class="alert alert-info">
<h4 class="alert-heading">Meshery Documentation Design Specification</h4>
See the <a href="https://docs.google.com/document/d/17guuaxb0xsfutBCzyj2CT6OZiFnMu9w4PzoILXhRXSo/edit#">Meshery Documentation Design Specification</a> which serves to provide an overview of the tooling and approach used to create Meshery’s documentation and it information architecture.
</div>

<h2 id="documentation-framework">Documentation Framework</h2>

<p>Meshery documentation is built using the following components:</p>

<ul>
  <li>Framework - <a href="https://jekyllrb.com">Jekyll</a></li>
  <li>Theme - <a href="https://github.com/vsoch/docsy-jekyll">https://github.com/vsoch/docsy-jekyll</a></li>
  <li>Repo - <a href="https://github.com/meshery/meshery/tree/master/docs">https://github.com/meshery/meshery/tree/master/docs</a></li>
  <li>Site - <a href="https://docs.meshery.io">https://docs.meshery.io</a></li>
  <li>AWS API GW - an instance is configured to redirect from docs.meshery.io to cloud.layer5.io, because of the repo location of where the docs currently reside.</li>
</ul>

<h2 id="set-up-your-development-environment">Set up your development environment</h2>

<div class="alert alert-info">
<h4 class="alert-heading">Jekyll</h4>
The Meshery Docs site is built using Jekyll - a simple static site generator. Jekyll can be installed on different platforms like Windows, Linux, and MacOS by the following steps 
</div>

<h3 id="for-windows">For Windows</h3>

<div class="alert alert-light">
<h4 class="alert-heading">Note</h4>
Windows users can run Jekyll by following the <a href="https://jekyllrb.com/docs/installation/windows/">Windows Installation Guide</a> and also installing Ruby Version Manager <a href="https://rvm.io">RVM</a>. RVM is a command-line tool which allows you to work with multiple Ruby environments on your local machine. Alternatively, if you're running Windows 10 version 1903 Build 18362 or higher, you can upgrade to Windows Subsystem for Linux <a href="https://docs.microsoft.com/en-us/windows/wsl/install-win10">WSL</a> and run Jekyll in Linux instead.
</div>

<ul>
  <li>
    <p>Fire up your WSL VM and install the ruby version manager (RVM):</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">sudo apt update
sudo apt install curl g++ gnupg gcc autoconf automake bison build-essential libc6-dev \
 	libffi-dev libgdbm-dev libncurses5-dev libsqlite3-dev libtool \
 	libyaml-dev make pkg-config sqlite3 zlib1g-dev libgmp-dev \
 	libreadline-dev libssl-dev
sudo gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3
curl -sSL https://get.rvm.io | sudo bash -s stable
sudo usermod -a -G rvm `whoami`
</code>
</div></pre>

    <p>If <code class="language-plaintext highlighter-rouge">gpg --keyserver</code> gives an error, you can use:</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">sudo gpg --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3
</code>
</div></pre>

    <p>OR</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">sudo gpg2 --keyserver hkp://pool.sks-keyservers.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB %}
</code>
</div></pre>

    <p>Restart your WSL VM before moving forward to install Ruby.</p>
  </li>
  <li>
    <p>To install Ruby, run:</p>

    <pre class="codeblock-pre"><div class="codeblock">
  <code class="clipboardjs">bash
  rvm install ruby
  rvm --default use ruby 2.7.5
  gem update
  gem install jekyll bundler
  </code>
  </div></pre>
  </li>
  <li>
    <p>Update the Gemfile located in meshery/docs directory</p>

    <pre class="codeblock-pre"><div class="codeblock">
  <code class="clipboardjs">ruby '3.0.2'
  </code>
  </div></pre>

    <p><strong>Note:</strong> In place of <code class="language-plaintext highlighter-rouge">3.0.2</code> add your installed version</p>
  </li>
  <li>
    <p>Also add this to the next line in the <em>Gemfile</em>.</p>
    <pre class="codeblock-pre"><div class="codeblock">
  <code class="clipboardjs">gem 'wdm','&gt;=0.1.0' if Gem.win_platform?
  </code>
  </div></pre>
  </li>
</ul>

<div class="alert alert-warning">
<h4 class="alert-heading">Don't Commit Gemfile</h4>
This is just a workaround for your local machine. So, do not commit or push the modified Gemfile or Gemfile.lock during Pull Requests.
</div>

<ul>
  <li>
    <p>Next, navigate to the following folder
<code class="language-plaintext highlighter-rouge">C:\Ruby24-x64\lib\ruby\gems\2.4.0\gems\eventmachine-1.2.5-x64-mingw32\lib</code></p>
  </li>
  <li>
    <p>Add <code class="language-plaintext highlighter-rouge">require 'em/pure_ruby'</code> in the first line of the <strong>eventmachine.rb</strong> file</p>
  </li>
</ul>

<h3 id="for-linux">For Linux</h3>

<ul>
  <li>
    <p>Prerequisites</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">sudo apt-get update
sudo apt-get install autoconf bison build-essential libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm3 libgdbm-dev
</code>
</div></pre>
  </li>
</ul>
<div class="alert alert-info">
<h4 class="alert-heading">Note</h4>
The latest versions of Debian-based OS'es do not support <code>libgdbm3</code>, so if you encounter an issue with it's installation, try replacing <code>libgdbm3</code> with <code>libgdbm5</code> or <code>libgdbm6</code>.
</div>

<h4 id="installing-rbenv">Installing rbenv</h4>

<ul>
  <li>
    <p>Cloning the rbenv repository</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">git clone https://github.com/rbenv/rbenv.git ~/.rbenv
</code>
</div></pre>
  </li>
</ul>

<div class="alert alert-info">
<h4 class="alert-heading">Note</h4>
Change bashrc with your shell specific rc file, for eg: if you are using zsh then the filename is zshrc.
</div>

<ul>
  <li>
    <p>Setting the path</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">echo 'export PATH="$HOME/.rbenv/bin:$PATH"' &gt;&gt; ~/.bashrc
</code>
</div></pre>
  </li>
  <li>
    <p>rbenv init</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">echo 'eval "$(rbenv init -)"' &gt;&gt; ~/.bashrc
</code>
</div></pre>
  </li>
  <li>
    <p>Reload your bashrc</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">source ~/.bashrc
</code>
</div></pre>
  </li>
  <li>
    <p>Check installation</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">type rbenv
</code>
</div></pre>
  </li>
</ul>

<h4 id="install-ruby">Install Ruby</h4>

<ul>
  <li>
    <p>rbenv install version</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">rbenv install 3.2.6
</code>
</div></pre>
  </li>
  <li>
    <p>To list all the versions that can be installed</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">rbenv install --list
</code>
</div></pre>
  </li>
  <li>
    <p>Set which Ruby version you want to use</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">rbenv global version
</code>
</div></pre>
  </li>
  <li>
    <p>Check Ruby installation</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">ruby -v
</code>
</div></pre>
  </li>
</ul>

<h3 id="for-macos">For MacOS</h3>

<ul>
  <li>Use docs here <a href="https://jekyllrb.com/docs/installation/macos/">Jekyll installation</a></li>
</ul>

<div class="alert alert-light">
<h4 class="alert-heading">Note</h4>
In case of any installation issues, use the <a href="http://discuss.meshery.io)">discussion forum</a>.
</div>

<h3 id="get-the-code">Get the code</h3>

<ul>
  <li>
    <p>Fork and then clone the <a href="https://github.com/meshery/meshery">Meshery repository</a></p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">git clone https://github.com/YOUR-USERNAME/meshery
</code>
</div></pre>
  </li>
  <li>
    <p>Change to the docs directory</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">cd docs
</code>
</div></pre>
  </li>
  <li>
    <p>Install any Ruby dependencies</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">gem install bundler
bundle install
</code>
</div></pre>
  </li>
</ul>

<div class="alert alert-info">
<h4 class="alert-heading">Note</h4>
If you are a Mac user you do not need to install the Ruby dependencies, after moving on to the docs directory, you can serve the site.
</div>

<h3 id="serve-the-site">Serve the site</h3>

<ul>
  <li>
    <p>Serve the code locally.</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">make docs
</code>
</div></pre>
  </li>
  <li>
    <p>If that gives an error run:</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">bundle exec jekyll serve --drafts --config _config_dev.yml
</code>
</div></pre>

    <p><em>From the <code class="language-plaintext highlighter-rouge">Makefile</code>, this command runs <code class="language-plaintext highlighter-rouge">$ bundle exec jekyll serve --drafts --livereload --config _config_dev.yml</code>. If this command results in an error, try running the server without Livereload using the command: <code class="language-plaintext highlighter-rouge">$ bundle exec jekyll serve --drafts --config _config_dev.yml</code>. Note that you will have to manually restart the server to reflect any changes made without Livereload. There are two Jekyll configurations, <code class="language-plaintext highlighter-rouge">jekyll serve</code> for local development and <code class="language-plaintext highlighter-rouge">jekyll build</code> to generate site artefacts for production deployment.</em></p>
  </li>
</ul>

<h3 id="using-docker">Using Docker</h3>

<p>If you’ve Docker and <code class="language-plaintext highlighter-rouge">make</code> installed in your system, then you can serve the site locally. This doesn’t require the need to install <em>Jekyll</em> and <em>Ruby</em> in your system.</p>

<div class="alert alert-info">
<h4 class="alert-heading">info</h4>
This may not work in Windows.
</div>

<p>Run the following command from the <em>docs</em> folder, else it will fail.</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">make docker</code>
</div>
</pre>

<h4 id="troubleshooting-note">Troubleshooting Note</h4>

<p>While performing any of the above steps, if you receive an error about mismatching ruby versions similar to the example below, follow one of the steps mentioned below.</p>

<p><code class="language-plaintext highlighter-rouge">Your ruby version is x.x.x but your Gemfile specified 2.7.x</code></p>

<p>The reason for this error is because Jekyll always considers the exact version of Ruby unlike JavaScript.</p>

<ul>
  <li>Install the required Ruby version by using <code class="language-plaintext highlighter-rouge">rvm</code> or by any means given above.</li>
  <li>
    <p>If you’re unable to install the required Ruby version, then manually configure the <code class="language-plaintext highlighter-rouge">Gemfile</code> (This is not recommended and should be done only if the above steps fail). Modify the ruby version inside the Gemfile similar to the example below:</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">source "https://rubygems.org"
ruby '3.1.1' //Change to the version you have installed
</code>
</div></pre>
  </li>
</ul>

<p>The <code class="language-plaintext highlighter-rouge">Gemfile.lock</code> will be updated automatically once the <code class="language-plaintext highlighter-rouge">make docs</code> command is run. 
(For Windows, run <code class="language-plaintext highlighter-rouge">bundle exec jekyll serve</code> if WSL2 isn’t present)</p>

<div class="alert alert-warning">
<h4 class="alert-heading">Don't Commit Gemfile</h4>
If you have followed the third step then please don't commit the changes made on `Gemfile` and `Gemfile.lock` in your branch to preserve integrity, else the CI action will fail to generate the site preview during PR.
</div>

<h3 id="using-gitpod">Using Gitpod</h3>
<ul>
  <li>Ensure you have an account on <a href="https://www.gitpod.io/" class="meshery-light">Gitpod</a> and add the <a href="https://chromewebstore.google.com/detail/gitpod/dodmmooeoklaejobgleioelladacbeki" class="meshery-light">Gitpod extension</a> to your browser.</li>
  <li>Open your forked Meshery repository on GitHub.</li>
  <li>Click on the “<strong>Gitpod</strong>” button in the top right corner of the repository page (it is only visible with the <a href="https://chromewebstore.google.com/detail/gitpod/dodmmooeoklaejobgleioelladacbeki" class="meshery-light">Gitpod browser extension</a> installed).</li>
</ul>

<div class="alert alert-dark">
<h4 class="alert-heading">About Gitpod</h4>
Gitpod will automatically clone and open the repository for you in a browser-based version of Visual Studio Code. It will also automatically build the project for you on launch, comes with Docker and other tools pre-installed, making it one of the fastest ways to spin up a development environment for <a href="https://github.com/meshery/meshery">Meshery.</a>
</div>

<ul>
  <li>
    <p>After opening the project on Gitpod, change to the docs directory.</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">cd docs
</code>
</div></pre>
  </li>
  <li>
    <p>Serve the code locally.</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">make docs
</code>
</div></pre>
  </li>
</ul>

<p>You should be able to access the site on port <code class="language-plaintext highlighter-rouge">4000</code>. If you want to access it in your localhost read the <a href="https://www.gitpod.io/docs/configure/workspaces/ports#local-port-forwarding-via-ssh">docs for port-forwarding using ssh</a>.</p>

<h3 id="make-necessary-changes">Make Necessary Changes</h3>
<ul>
  <li>Make changes as required based on the issue you are solving.</li>
  <li>Ensure to verify that your changes reflect correctly by serving the site locally using <code class="language-plaintext highlighter-rouge">make docs</code>.</li>
</ul>

<div class="alert alert-light">
<h4 class="alert-heading">Note</h4>
If the issue requires making new doc page that replaces the old page, please don't forget to add a redirect link on the old page. This redirect link field should have the link of the new page created.
</div>

<h3 id="create-a-pull-request">Create a Pull Request</h3>

<ul>
  <li>
    <p>After making changes, don’t forget to commit with the sign-off flag (-s)!</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">git commit -s -m “my commit message w/signoff”
</code>
</div></pre>
  </li>
  <li>
    <p>Once all changes have been committed, push the changes.</p>

    <pre class="codeblock-pre"><div class="codeblock">
<code class="clipboardjs">git push origin [branch-name]
</code>
</div></pre>
  </li>
  <li>
    <p>Then on Github, navigate to the <a href="https://github.com/meshery/meshery">Meshery repository</a> and create a pull request from your recently pushed changes!</p>
  </li>
</ul>

<hr />

<ul>
  <li><em>See the <a href="https://docs.google.com/document/d/17guuaxb0xsfutBCzyj2CT6OZiFnMu9w4PzoILXhRXSo/edit">Meshery Documentation Google Doc</a> for additional reference.</em></li>
</ul>

<h2 id="using-the-features-of-meshery-docs">Using the features of Meshery Docs</h2>

<h3 id="clipboard-feature">Clipboard Feature</h3>

<p>Most popular clipboard plugins like Clipboard JS require the manual creation of a new ID for each code snippet. A different approach is used here. For code snippets, we either use html tags or markdown in the following manner:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">&lt;pre class=&quot;codeblock-pre&quot;&gt;&lt;div class=&quot;codeblock&quot;&gt;
&lt;code class=&quot;clipboardjs&quot;&gt;code_snippet_here&lt;/code&gt;
&lt;/div&gt;&lt;/pre&gt;</code>
</div>
</pre>

<p>You can also use the <code class="language-plaintext highlighter-rouge">code</code> component created for this feature to make it easy to use. It can be used by including code.html and then passing the code snippet to it.</p>

<p>If the code snippet does not contain any special characters then, it can be used directly as below:
<code class="language-plaintext highlighter-rouge">{% include code.html code="code_snippet_here" %}</code>`</p>

<p>If the code snippet has special characters then it must be captured first in variable <code class="language-plaintext highlighter-rouge">code_content</code>,  and then pass it to the component.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{% capture code_content%}code_snippet_here{% endcapture %}
{% include code.html code=code_content %}
</code></pre></div></div>

<p>Don’t use <code class="language-plaintext highlighter-rouge">code</code> component when the snippet is in between an ordered list, this breaks the order and next item in the list will start numbering from 1. Instead, use <code class="language-plaintext highlighter-rouge">&lt;pre class="codeblock_pre"&gt;...&lt;/pre&gt;</code> method described above.”</p>

<p><strong>A full block:</strong></p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">```code snippet```</code>
</div>
</pre>

<p><strong>Inline formatting:</strong></p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">\`code snippet\`: `code snippet`</code>
</div>
</pre>

<p><strong>Language specific:</strong></p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">```(language name)
code snippet
```</code>
</div>
</pre>

<p>Whenever the code tags are detected, the clipboard javascript file is automatically loaded. Each code element is given a custom id and a clipboard-copy icon to copy the content.</p>

<h2 id="documentation-contribution-flow-summary">Documentation Contribution Flow Summary</h2>

<div class="alert alert-light">
<h4 class="alert-heading">Note</h4>
For contributing `mesheryctl` reference section, refer <a href="/contributing-cli">Contributing CLI</a>
</div>

<p>The following is a concise summary of the steps to contribute to Meshery documentation.</p>

<ol>
  <li>Create a fork, if you have not already, by following the steps described <a href="CONTRIBUTING-gitflow.md">here</a></li>
  <li>In the local copy of your fork, navigate to the docs folder.
<code class="language-plaintext highlighter-rouge">cd docs</code></li>
  <li>Create and checkout a new branch to make changes within
<code class="language-plaintext highlighter-rouge">git checkout -b &lt;my-changes&gt;</code></li>
  <li>Edit/add documentation.
<code class="language-plaintext highlighter-rouge">vi &lt;specific page&gt;.md</code></li>
  <li>Add redirect link on the old page (only when a new page is created that replaces the old page)</li>
  <li>Run site locally to preview changes.
<code class="language-plaintext highlighter-rouge">make docs</code></li>
  <li>Commit, <a href="#commit-signing">sign-off</a>, and push changes to your remote branch.
<code class="language-plaintext highlighter-rouge">git push origin &lt;my-changes&gt;</code></li>
  <li>Open a pull request (in your web browser) against the repo: https://github.com/meshery/meshery.</li>
</ol>

<h3 id="navigation-table-of-contents-in-sidebar-toc">Navigation Table of Contents in Sidebar (toc)</h3>

<p>Sidebars use toc to create a table of contents. It is written in the following manner:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    toc:
  - title: Group 1
    subfolderitems:
      - page: Thing 1
        url: /thing1.html
      - page: Thing 2
        url: /thing2.html
      - page: Thing 3
        url: /thing3.html
</code></pre></div></div>

<p>The output of the code snippet would be:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    Group 1
      Thing 1
      Thing 2
      Thing 3
</code></pre></div></div>

<p>In this example, <strong>Group 1</strong> is a <code class="language-plaintext highlighter-rouge">parent</code> section within the Table of Contents, and <strong>Thing 1</strong>, <strong>Thing 2</strong>, and <strong>Thing 3</strong> are <code class="language-plaintext highlighter-rouge">children</code> of <strong>Group 1</strong>. This is a direct hierarchy with a single level of children under the parent.</p>

<p><code class="language-plaintext highlighter-rouge">Grandchildren</code> are added in the sidebars in the following manner:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    toc:
  - title: Group 1
    subfolderitems:
      - page: Thing 1
        url: /thing1.html
        subfolderitems:
          - page: Subthing 1.1
            url: /subthing1_1.html
          - page: Subthing 1.2
            url: /subthing1_2.html
      - page: Thing 2
        url: /thing2.html
      - page: Thing 3
        url: /thing3.html
</code></pre></div></div>

<p>The output of the code snippet would be:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    Group 1
      Thing 1
       Subthing 1.1
       Subthing 1.2
      Thing 2
      Thing 3
</code></pre></div></div>

<p>Here, <strong>Subthing 1.1</strong> and <strong>Subthing 1.2</strong> are the <code class="language-plaintext highlighter-rouge">grandchildren</code> of <strong>Thing 1</strong>.</p>

<p>In <code class="language-plaintext highlighter-rouge">docs/_includes/sidebar.html</code> contains three levels of navigation hierarchy.</p>

<ul>
  <li><strong>Parent</strong>: It serves as a top level category for related content.</li>
  <li><strong>Children</strong>: They are immediate subsections or topics that fall under the parent section.</li>
  <li><strong>Grandchildren</strong>: They are nested under Thing 1 and provide a more detailed breakdown of information within the child section. Grandchildren are used to organize content further, offering a more detailed structure for a specific topic.</li>
</ul>

<p>These sections create a hierarchical and organized navigation experience for readers.</p>

<h3 id="alerts">Alerts</h3>

<div class="alert alert-info">
<h4 class="alert-heading">What is an alert?</h4>
An alert is a box that can stand out to indicate important information. You can choose from levels success, warning, danger, info, and primary. This example is an info box, and the code for another might look like this:
</div>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{% include alert.html type="info" title="Here is another!" %}
</code></pre></div></div>

<p>Just for fun, here are all the types:</p>

<div class="alert alert-warning">
<h4 class="alert-heading">warning</h4>
This is a warning
</div>

<div class="alert alert-danger">
<h4 class="alert-heading">danger</h4>
This alerts danger!
</div>

<div class="alert alert-success">
<h4 class="alert-heading">success</h4>
This alerts success
</div>

<div class="alert alert-info">
<h4 class="alert-heading">info</h4>
This is useful information.
</div>

<div class="alert alert-primary">
<h4 class="alert-heading">primary</h4>
This is a primary alert
</div>

<div class="alert alert-secondary">
<h4 class="alert-heading">secondary</h4>
This is a secondary alert
</div>

<div class="alert alert-light">
<h4 class="alert-heading">light</h4>
This is a light alert
</div>

<div class="alert alert-dark">
<h4 class="alert-heading">dark</h4>
This is a dark alert
</div>

<h4 id="alerthtml">alert.html</h4>

<p>Meshery Docs has a common include file <a href="https://github.com/meshery/meshery/blob/master/docs/_includes/alert.html">alert.html</a>, to provide consistent formatting for notes, warnings, and various informative callouts intended for the readers.</p>

<p>To use the <code class="language-plaintext highlighter-rouge">alert.html</code> feature in our documentation include the following code:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  {% include alert.html type="info" title="Here is another!" %}
</code></pre></div></div>

<p>Other supported alert types include <code class="language-plaintext highlighter-rouge">warning</code>, <code class="language-plaintext highlighter-rouge">danger</code>,<code class="language-plaintext highlighter-rouge">success</code>,<code class="language-plaintext highlighter-rouge">primary</code>, <code class="language-plaintext highlighter-rouge">secondary</code>, <code class="language-plaintext highlighter-rouge">light</code>, <code class="language-plaintext highlighter-rouge">dark</code> .</p>

<h3 id="quotes">Quotes</h3>

<p>You can include block quotes to emphasize text.</p>

<blockquote>
  <p>Here is an example. Isn’t this much more prominent to the user?</p>
</blockquote>

<h2 id="development">Development</h2>

<h3 id="adding-integration-specific-information-to-individual-integration-pages">Adding Integration Specific Information to Individual Integration Pages</h3>

<p>Integration pages (<a href="https://docs.meshery.io/extensibility/integrations/aws">example</a>) are automatically generated, however, integration specific documentation is often needed.</p>

<p><a href="https://github.com/meshery/meshery/tree/master/docs/_modelscustominfo">modelscustominfo</a> collection holds custom markdown files. Follow these steps:</p>

<ol>
  <li>Create a file inside the <code class="language-plaintext highlighter-rouge">modelscustominfo</code> collection.</li>
  <li>Ensure the file includes frontmatter with the <code class="language-plaintext highlighter-rouge">title</code> key, set to the title of the integration.</li>
</ol>

<p>The content that follows the frontmatter in this file will be automatically parsed and rendered on the integration page</p>

<p>Example:</p>

<p>file: <code class="language-plaintext highlighter-rouge">_modelscustominfo/aad.md</code></p>

<div class="language-md highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s">Azure Active Directory (AAD)</span>
<span class="nn">---</span>

<span class="nt">&lt;h2&gt;</span>Azure Active Directory (AAD)<span class="nt">&lt;/h2&gt;</span>

</code></pre></div></div>

<p>In this example, the heading “<b>Azure Active Directory</b>” will be displayed on the integration page:
<a href="https://docs.meshery.io/extensibility/integrations/aad-pod-identity">Azure Active Directory Integration Page</a></p>

<h3 id="suggested-reading">Suggested Reading</h3>

<p>Disable suggested reading by setting the <code class="language-plaintext highlighter-rouge">suggested-reading</code> frontmatter variable to <code class="language-plaintext highlighter-rouge">false</code>.</p>

<h3 id="editable-intra-page-table-of-contents-toolbar">Editable Intra-page Table of Contents Toolbar</h3>

<p>Control the display of this intra-page navigator with either page level or layout level frontmatter variables:</p>

<p><code class="language-plaintext highlighter-rouge">display-toolbar</code></p>

<p>Set to <code class="language-plaintext highlighter-rouge">true</code> (make “editable” toolbar visible) or <code class="language-plaintext highlighter-rouge">false</code> (hide “editable” toolbar)</p>

<h3 id="if-conditional"><code class="language-plaintext highlighter-rouge">if</code> conditional</h3>

<p>This executes the block of code only if the given condition is true. It is executed in the following manner:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">{% if product.title == &#39;Awesome Shoes&#39; %}
  These shoes are awesome!
{% endif %}
</code>
</div>
</pre>

<p>If the condition is true, the output would be:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    These shoes are awesome!
</code></pre></div></div>

<h3 id="for-loop"><code class="language-plaintext highlighter-rouge">for</code> loop</h3>

<p>The for statement executes a block of code repeatedly. It is wriiten in the following manner:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">{% for names in collection.names %}
  {{ name.title }}
{% endfor %}</code>
</div>
</pre>

<p>The output produced by the above code snippet:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    Sam Ham Ethan
</code></pre></div></div>

<h3 id="comment">Comment</h3>

<p>Comments allow to leave a block of code unattended, any statements between opening and closing comment would not be executed.</p>

<h3 id="include">Include</h3>

<p>The above tag is used to insert a already rendered file within the current template. It is written in the following manner:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">{% include file.html %}</code>
</div>
</pre>

<h3 id="assign">Assign</h3>

<p>The assign tag is used to create a new variable. It is written in the following manner:</p>

<pre class="codeblock-pre" style="font-size: 1.75rem !important;">
<div class="codeblock">
<code class="clipboardjs">{% assign variable1 = true %}</code>
</div>
</pre>

<p>Two helpful resources:</p>

<ol>
  <li>Liquid Docs - <a href="https://shopify.github.io/liquid/">https://shopify.github.io/liquid/</a></li>
  <li>Jekyll Docs - <a href="https://jekyllrb.com/docs/">https://jekyllrb.com/docs/</a></li>
</ol>


<script>
  /*clipboard.js code*/
</script>

<!-- <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>
$(document).ready(function() {

    var toc = $('#TOC');

    // Select each header
    sections = $('.td-content h1');
        $.each(sections, function(idx, v) {
            section = $(v);
            var div_id = $(section).attr('id');
            if(!section.hasClass('noTOC')){
               var div_text = section.text().split('¶')[0];
              var parent = $("#" + div_id)
              var content = '<li id="link_' + div_id + '" class="md-nav__item"><a class="md-nav__link" href="#' + div_id + '" title="' + div_text +'">' + div_text +'</a></li>';
              $(document).find(toc).append(content);
            }

            // Add section code to subnavigation
            var children = $('<nav class="md-nav"><ul class="md-nav__list"></nav></ul>')
            var contenders = $("#" + div_id).nextUntil("h1");
            $.each(contenders, function(idx, contender){
               if( !$(contender).hasClass("noTOC") && ($(contender).is('h2') || $(contender).is('h3')) ) {
                   var contender_id = $(contender).attr('id');
                   var contender_text = $(contender).text().split('¶')[0];
                   var content = '<li class="md-nav__item"><a class="md-nav__link" href="#' + contender_id + '" title="' + contender_text +'">' + contender_text +'</a></li>';
                   children.append(content);
                }
             })
             $("#link_" + div_id).append(children);
        });
        //added 'selected' tag to the first element of toc
        $('.md-nav__link').first().addClass('selected');

        $(window).scroll(function(e){
          // Detect how far are we from the top of the page
          let windowTop = $(this).scrollTop();
          // Loop through every navigation menu item
          $('.md-nav__link').each(function (event) {       
              if (windowTop >= $($(this).attr('href')).offset().top - 100) {
              // Remove 'selected' from previously highlighted menu items
              $('.selected').removeClass('selected');
              // Highlight the current menu item by adding 'selected' class
              $(this).addClass('selected');
          }
          if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            $('.selected').removeClass('selected');
              $(this).addClass('selected');
          }
        });
      })
      // Smooth scroll to target section when clicking on TOC link
      $('a[href^="#"]').on('click', function(event) {
        event.preventDefault();
        var target = $(this.hash);
        if (target.length) {
          $('html, body').animate({
          scrollTop: target.offset().top - 70
          }, 1000);
        }
      });
    });
</script> -->   
          
            


<h2>Suggested Reading</h2>






<ul>
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
    <li><a href="/project/contributing/build-and-release">Build & Release (CI)</a>
      
      - Details of Meshery's build and release strategy.
      
    </li>
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
    <li><a href="/project/contributing/contributing-adapters">Contributing to Meshery Adapters</a>
      
      - How to contribute to Meshery Adapters
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-cli">Contributing to Meshery CLI</a>
      
      - How to contribute to Meshery Command Line Interface.
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-cypress">Contributing to Meshery's End-to-End Tests using Cypress</a>
      
      - How to contribute to End-to-End Tests using Cypress.
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-docker-extension">Contributing to Meshery Docker Extension</a>
      
      - How to contribute to Meshery Docker Extension
      
    </li>
    
  
    
  
    
    <li><a href="/project/contributing/contributing-error">How to write MeshKit compatible errors</a>
      
      - How to declare errors in Meshery components.
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-gitflow">Contributing to Meshery using git</a>
      
      - How to contribute to Meshery using git
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-cli-guide">Meshery CLI Contributing Guidelines</a>
      
      - Design principles and code conventions.
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-components">Contributing to Model Components</a>
      
      - How to contribute to Meshery Model Components
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-relationships">Contributing to Model Relationships</a>
      
      - How to contribute to Meshery Models Relationships, Policies...
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-models-quick-start">Contributing to Models Quick Start</a>
      
      - A no-fluff guide to creating your own Meshery Models quickly.
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-models">Contributing to Models</a>
      
      - How to contribute to Meshery Models, Components, Relationships, Policies...
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-policies">Contributing to Meshery Policies</a>
      
      - How to contribute to Meshery Policies
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-server-events">Contributing to Meshery Server Events</a>
      
      - Guide is to help backend contributors send server events using Golang.
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-ui-notification-center">Contributing to Meshery UI - Notification Center</a>
      
      - How to contribute to the Notification Center in Meshery's web-based UI.
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-ui-sistent">Contributing to Meshery UI - Sistent</a>
      
      - How to contribute to the Meshery's web-based UI using sistent design system.
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-ui-tests">Contributing to Meshery's End-to-End Tests</a>
      
      - How to contribute to End-to-End Tests using Playwright.
      
    </li>
    
  
    
    <li><a href="/project/contributing/contributing-ui">Contributing to Meshery UI</a>
      
      - How to contribute to Meshery UI (web-based user interface).
      
    </li>
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
    <li><a href="/project/contributing/contributing-server">Contributing to Meshery Server</a>
      
      - How to contribute to Meshery Server
      
    </li>
    
  
    
    <li><a href="/project/contributing/meshery-windows">Setting up Meshery Development Environment on Windows</a>
      
      - How to set up Meshery Development Environment on Windows
      
    </li>
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
    <li><a href="/project/contributing/test-status">End-to-End Test Status</a>
      
      - Status reports of Meshery's various test results.
      
    </li>
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
</ul> 
           
          <br/>


        </div>
      </main>
      
      <div class="content-table-wrapper">
        <div class="content-table">
          <div class="content-table__editable"><strong>Tools</strong>
<a href="https://github.com/meshery/meshery/issues/new?assignees=&labels=area%2Fdocs%2C+framework%2Fjekyll&template=documentation.md&title=%5BDocs%5D" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i> Create doc issue</a>
<a href="https://github.com/meshery/meshery/blob/master/docs/pages/project/contributing/contributing-docs.md" rel="noopener" target="_blank"><i class="fa fa-edit fa-fw"></i> Edit this page</a>
<a href="https://github.com/meshery/meshery/new/master/docs/pages/project/contributing/contributing-docs.md?filename=change-me.md&value=---%0Atitle%3A+%22Long+Page+Title%22%0AlinkTitle%3A+%22Short+Nav+Title%22%0Aweight%3A+100%0Adescription%3A+%3E-%0A+++++Page+description+for+heading+and+indexes.%0A---%0A%0A%23%23+Heading%0A%0AEdit+this+template+to+create+your+new+page.%0A%0A%2A+Give+it+a+good+name%2C+ending+in+%60.md%60+-+e.g.+%60getting-started.md%60%0A%2A+Edit+the+%22front+matter%22+section+at+the+top+of+the+page+%28weight+controls+how+its+ordered+amongst+other+pages+in+the+same+directory%3B+lowest+number+first%29.%0A%2A+Add+a+good+commit+message+at+the+bottom+of+the+page+%28%3C80+characters%3B+use+the+extended+description+field+for+more+detail%29.%0A%2A+Create+a+new+branch+so+you+can+preview+your+new+file+and+request+a+review+via+Pull+Request.%0A" rel="noopener" target="_blank"><i class="fa fa-plus fa-fw"></i> Create new page</a>


<!-- this will parse through the header fields and add a button to open
     an issue / ask a question on Github. The editable field should be in
     the post frontend matter, and refer to the label to open the issue for -->
     
</div>
          <nav id="TableOfContents">
            <strong>Contents</strong>
            <ul>
              <li>
                <ul id="TOC">
                  <!-- Links will be appended here-->
                </ul>
              </li>
            </ul>
          </nav>
        </div>
      </div>
      
    </div>
    <footer class="footer">
  <!-- meshery-custom-begin"
      <div class="col-6 col-sm-4 text-xs-center order-sm-2">

<ul class="list-inline mb-0">
  <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="Twitter" data-original-title="Twitter">
    <a class="text-white" target="_blank" href="https://twitter.com/https://twitter.com/mesheryio">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
</ul>
</div>
<div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
<ul class="list-inline mb-0">
  <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="GitHub" data-original-title="GitHub">
    <a class="text-white" target="_blank" href="https://github.com/meshery/meshery">
      <i class="fab fa-github"></i>
    </a>
  </li>
</ul>
meshery-custom-end -->
  <div class="text-white">&copy; 2025 The Meshery Authors</div>
  

  <!-- meshery-custom-begin -->

  <div class="footer-icons-list">
    <div class="footer-icons">
      <a class="social__link social__link--forum" href="http://discuss.meshery.io" target="_blank" rel="noreferrer">
        <img
          src=""
          alt="forum"
        />
        <span class="footer-icons-text">Community discussion forum</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link social__link--mail" href="https://meshery.io/subscribe" target="_blank" rel="noreferrer">
        <img
          src=""
          alt="mail"
        />
        <span class="footer-icons-text">Get connected with the community</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link social__link--slack" href=" https://slack.meshery.io/" target="_blank" rel="noreferrer">
        <img
          class="slack"
          src=""
          alt="slack"
        />
        <span class="footer-icons-text">Join the Meshery Slack</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://meshery.io/calendar">
        <svg fill="#666666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
          <path
            d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"
          />
          <g stroke-linecap="undefined" stroke-linejoin="undefined">
            <path d="M-3.468 8.168h-.033m25.313-4.242l-.063-.254M7.858 4.814v9.387" />
            <path d="M1.833 9.507h12.051" />
          </g>
        </svg>
        <span class="footer-icons-text">Subscribe to the community calendar</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://twitter.com/mesheryio" target="_blank" rel="noreferrer">
       <svg alt="twitter" class="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1" height="1.8em"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="#666666"></path></svg>
       <span class="footer-icons-text">Follow on Twitter</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://github.com/meshery" target="_blank" rel="noreferrer">
        <img
          class="github"
          src=""
          alt="github"
        />
        <span class="footer-icons-text">Contribute on GitHub</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://www.linkedin.com/showcase/meshery/" target="_blank" rel="noreferrer">
        <img
          class="linkedin"
          src=""
          alt="linkedin"
        />
        <span class="footer-icons-text">Connect on LinkedIn</span>
      </a>
    </div>

    <div class="footer-icons">
      <a
        class="social__link"
        href="https://www.youtube.com/mesheryio?sub_confirmation=1"
        target="_blank"
        rel="noreferrer"
      >
        <img
          class="youtube"
          src=""
          alt="youtube"
        />
        <span class="footer-icons-text">Watch community meeting recordings</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://hub.docker.com/u/meshery/" target="_blank" rel="noreferrer">
        <img
          class="docker"
          src=""
          alt="docker"
        />
        <span class="footer-icons-text">Access Docker images</span>
      </a>
    </div>
  </div>
  <!-- meshery-custom-end -->
</footer>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>

<script type="text/javascript" src="/assets/js/lightbox.js"></script>
<link rel="stylesheet" href="/assets/css/lightbox.css" />
<script type="module" src="https://md-block.verou.me/md-block.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/navbar.js"></script>

 <script async src='https://www.google-analytics.com/analytics.js'></script>
<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	ga('create', 'UA-00000000-0', 'auto');
	ga('send', 'pageview');
}
</script>

  </body>
</html>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>
$(document).ready(function() {

    var toc = $('#TOC');

    // Select each header
    sections = $('.td-content h1');
        $.each(sections, function(idx, v) {
            section = $(v);
            var div_id = $(section).attr('id');
            if(!section.hasClass('noTOC')){
               var div_text = section.text().split('¶')[0];
              var parent = $("#" + div_id)
              var content = '<li id="link_' + div_id + '" class="md-nav__item"><a class="md-nav__link" href="#' + div_id + '" title="' + div_text +'">' + div_text +'</a></li>';
              $(document).find(toc).append(content);
            }

            // Add section code to subnavigation
            var children = $('<nav class="md-nav"><ul class="md-nav__list"></nav></ul>')
            var contenders = $("#" + div_id).nextUntil("h1");
            $.each(contenders, function(idx, contender){
               if( !$(contender).hasClass("noTOC") && ($(contender).is('h2') || $(contender).is('h3')) ) {
                   var contender_id = $(contender).attr('id');
                   var contender_text = $(contender).text().split('¶')[0];
                   var content = '<li class="md-nav__item"><a class="md-nav__link" href="#' + contender_id + '" title="' + contender_text +'">' + contender_text +'</a></li>';
                   children.append(content);
                }
             })
             $("#link_" + div_id).append(children);
        });
        //added 'selected' tag to the first element of toc
        $('.md-nav__link').first().addClass('selected');

        $(window).scroll(function(e){
          // Detect how far are we from the top of the page
          let windowTop = $(this).scrollTop();
          // Loop through every navigation menu item
          $('.md-nav__link').each(function (event) {       
              if (windowTop >= $($(this).attr('href')).offset().top - 100) {
              // Remove 'selected' from previously highlighted menu items
              $('.selected').removeClass('selected');
              // Highlight the current menu item by adding 'selected' class
              $(this).addClass('selected');
          }
          if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            $('.selected').removeClass('selected');
              $(this).addClass('selected');
          }
        });
      })
      // Smooth scroll to target section when clicking on TOC link
      $('a[href^="#"]').on('click', function(event) {
        event.preventDefault();
        var target = $(this.hash);
        if (target.length) {
          $('html, body').animate({
          scrollTop: target.offset().top - 70
          }, 1000);
        }
      });
    });
</script>

